import React,{Component} from 'react';
import { View , Text,TouchableOpacity } from 'react-native';
import SvgUri from 'react-native-svg-uri'
import Picker from 'react-native-picker';
import {man,woman} from '../../../../res/fonts/svg'
import IconFonts from '../../../../components/IconFonts'
import { Slider } from 'react-native-elements'
import { pxToDp } from '../../../../utils/stylesKits';
import cityJson from '../../../../utils/citys.json'
import THButton from '../../../../components/THButton';
    class Index extends Component{
        constructor(props){
            super(props);
            this.state = JSON.parse(JSON.stringify(this.props.params))
        }
        // 选中性别
        chooseGender =(gender) =>{
            if(gender == this.state.gender){
                this.setState({gender:''})
                return;
            }
            this.setState({gender})
        }
        // 提交数据 要执行的方法
        handleSubmitFilter = () =>{
            this.props.onClose();
            this.props.onSubmitFilter(this.state)
            
        }
        render(){
            const {gender,lastLogin,distance,city,education} = this.state
            return(
                <View style={{position:"absolute",width:"100%",height:"70%",left:0,bottom:0,backgroundColor:"#fff"}}>
                    {/* 筛选标题 */}
                    <View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",height:pxToDp(50)}}>
                        <Text></Text>
                        <Text style={{color:"#999",fontSize:pxToDp(26),fontWeight:"bold"}}>筛选</Text>
                        <IconFonts style={{fontSize:pxToDp(30)}} onPress={this.props.onClose} name="iconshibai" />
                    </View>
                    {/* 性别 */}
                    <View style={{paddingLeft:pxToDp(10),paddingRight:pxToDp(10),marginTop:pxToDp(10),flexDirection:"row",justifyContent:"flex-start",alignItems:"center"}}>
                        <Text style={{color:"#777",fontSize:pxToDp(18),width:pxToDp(80)}}>性别:</Text>
                        {/* 性别图标 */}
                        <View style={{width:"40%",flexDirection:'row',alignSelf:"center",justifyContent:"space-around"}}>
                            <TouchableOpacity onPress={this.chooseGender.bind(this,'男')} style={{width:pxToDp(40),height:pxToDp(40),borderRadius:pxToDp(40),backgroundColor:gender === "男"?"#d81e06":"#eee",justifyContent:"center",alignItems:"center"}}>
                            <SvgUri svgXmlData={man} width="30" height="30" />
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.chooseGender.bind(this,'女')} style={{width:pxToDp(40),height:pxToDp(40),borderRadius:pxToDp(40),backgroundColor:gender === "女"?"#d81e06":"#eee",justifyContent:"center",alignItems:"center"}}>
                            <SvgUri svgXmlData={woman} width="30" height="30" />
                            </TouchableOpacity>
                        </View>
                    </View>
                    {/* 选择距离 */}
                    <View style={{paddingLeft:pxToDp(10),marginTop:pxToDp(10)}}>
                        <Text style={{color:"#777",fontSize:pxToDp(18)}}>距离:{distance || 0}M</Text>
                        <Slider
                            value={distance}
                            minimumValue={0}
                            maximumValue={100000}
                            step={1}
                            onValueChange={(distance)=>this.setState({distance})}
                        />
                    </View>
                    {/* 设置确定 */}
                    <View style={{paddingLeft:pxToDp(10),paddingRight:pxToDp(10),marginTop:pxToDp(10)}}>
                        <THButton onPress={this.handleSubmitFilter} style={{width:"100%",alignSelf:"center",height:pxToDp(40)}}>确认</THButton>
                    </View>
                </View>
            );
        }
    }
export default Index;
